<template>
    <el-dialog v-model="showMemberWin"  width="57%" draggable>
      <div class="container">
        <p class="title">课程成员</p>
      <div class="tab">
        <li  @click="showIndex = 0; " :class="{chosen: showIndex == 0}">团队</li>
        <li  @click="showIndex = 1; " :class="{chosen: showIndex == 1}">个人</li>
      </div>
      <div class="content">
          <div class="tabItem" v-show="showIndex == 0">
          </div>
          <div class="tabItem" v-show="showIndex == 1">
            <li v-for="(item, index) in member">
              {{ item.studentName }} 
            </li>
          </div>
      </div>
      </div>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { defineProps, defineEmits } from 'vue';
  
  const props = defineProps({
    showMemberWin: Boolean,
    member: Array
  })



  //切换
  const showIndex = ref(0);
</script>
<style scoped>
.container{
  padding: 9%;
  padding-top: 3.2%;
}
.title{
  font-family: Source Han Sans CN;
	font-size: 30px;
	font-weight: bold;
	font-stretch: normal;
	line-height: 51px;
	letter-spacing: 0px;
	color: #707070;
  text-align: center;
  position: absolute;
  top: -19%;
  width: 81.5%;
}
.tab{
  width: 100%;
  display: flex;
  margin-bottom: 1.7%;
  height: 4%;
}
.tab li{
  width: 50%;
  text-align: center;
  font-family: Source Han Sans CN;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
  color: #707070;
  list-style: none;
  cursor: pointer;
  border: 1px solid #707070;
}
.tabItem{
  width: 100%;
  background-color: white;
}
.chosen{
  color: #fafafa !important;
  border: 0px !important;
  background-color: #8493a6;
}
.tabItem li{
  font-family: Source Han Sans CN;
	font-size: 22px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 37px;
	letter-spacing: 0px;
	color: #707070;
  list-style: none;
  border-bottom: 1px solid #707070;
  padding-left: 4.4%;
}
</style>
<style>
.el-icon svg{
  color: #707070;
}
.el-dialog__headerbtn .el-dialog__close{
  font-size: 25px;
}
</style>